<template>
  <div style="display: flex">
    <el-button
      v-if="showFastBtn"
      type="primary"
      style="width: 220px; margin-right: 10px"
      @click="handleShiftChange('prev')"
    >
      <i class="iconfont-sys iconsys-shang"></i>
      上一天</el-button
    >

    <div style="width: 160px; margin-right: 10px">
      <ArtSearchDate
        v-model:value="time"
        :item="{ type, label: '', prop: '', config: { type, clearable: false } }"
      />
    </div>

    <el-button
      v-if="showFastBtn"
      :disabled="isNextBtnDisabled"
      type="primary"
      @click="handleShiftChange('next')"
    >
      <i class="iconfont-sys iconsys-xia"></i>下一天</el-button
    >
  </div>
</template>

<script setup lang="ts">
  /**
   * 时间面板
   */

  import { addDay, subDay } from '@/utils'
  import { currentTime } from '@/composables/useCurrentTime'
  import { type Props, defaultProps } from './props'

  const props = withDefaults(defineProps<Props>(), defaultProps)

  const emits = defineEmits(['update:modelValue', 'change', 'confirm'])

  const isRange = computed(() => props.type?.includes('range'))

  const time = computed({
    get: () => props.modelValue,
    set: (newValue) => {
      emits('change', newValue)
      emits('update:modelValue', newValue)
    }
  })

  // 禁用下一天按钮
  const isNextBtnDisabled = computed(() => {
    if (isRange.value) {
      return time.value[1] === currentTime.value.format('YYYY-MM-DD')
    } else {
      return time.value === currentTime.value.format('YYYY-MM-DD')
    }
  })

  // 快捷切换
  const handleShiftChange = (direction: 'prev' | 'next') => {
    const isPrev = direction === 'prev'

    const fn = isPrev ? subDay : addDay

    if (isRange.value) {
      time.value as [string, string]
      time.value = [fn(time.value[0], 1), fn(time.value[1], 1)]
    } else {
      time.value = fn(time.value as string, 1)
    }
  }
</script>
